<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.101.0">
    <title>Cover Template · Bootstrap v4.6</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/4.6/examples/cover/">


    <!-- Bootstrap core CSS -->
    <link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">


    <style>
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }
    </style>


    <!-- Custom styles for this template -->
    <link href="cover.css" rel="stylesheet">

    <script src="../vue/vue.global.js"></script>
    <!--书籍-->
    <script src="phrase/早安英语.js"></script>
    <script src="phrase/罗马假日.js"></script>
    <script src="phrase/50句子700词.js"></script>
    <script src="phrase/50短句.js"></script>
    <!--工具-->
    <script src="utils/ReadUtils.js"></script>
    <script src="utils/FileUtils.js"></script>
    <script src="utils/BookUtils.js"></script>
</head>
<body class="text-center">
<span id="app" class="langWithe">

    <button type="button" class="btn btn-link">Link</button>
    <div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column" v-if="initFinish">
        <header class="masthead mb-auto">
            <div class="inner">
                <h3 class="masthead-brand">Cover</h3>
                <nav class="nav nav-masthead justify-content-center">
                    <a class="nav-link active" href="#">Home</a>
                    <a class="nav-link" href="#" @click="changeBook(bookEnum.BOOK50TO700Words)">50句子7000词</a>
                    <a class="nav-link" href="#" @click="changeBook(bookEnum.BOOK50Words)">50短句</a>
                    <a class="nav-link" href="#" @click="changeBook(bookEnum.LuoMaJiaRi)">罗马假日</a>
                    <a class="nav-link" href="#" @click="changeBook(bookEnum.ZaoAnYingYu)">早安英语</a>
                </nav>
            </div>
        </header>

        <main role="main" class="inner cover">
            <h1 class="cover-heading">Practice in English.</h1>
            <p class="lead">Switch cards and sort them correctly, Switching phrases can help you learn more.</p>
            <p class="lead">
<!--                <a href="#" class="btn btn-lg btn-secondary">Learn more</a>-->
                <button type="button" class="btn btn-warning mr5 width50" @click="previousPhrase()">Prev</button>
                <button type="button" class="btn btn-warning mr5 width50" @click="nextPhrase()">Next</button>
            </p>
            <template v-if="currentPhrase">
<!--                <p class="lead">-->
                <!--                    {{currentPhrase}}-->
                <!--                </p>-->

                <p class="lead">
                    {{currentPhrase.EnglishPhrase}}
                </p>

                <p class="lead">
                    {{currentPhrase.ChinesePhrase}}
                </p>

                <p class="lead">
                     <template v-for="(word,index ) in currentPhrase.EnglishWordInfo.Words">
                         <button type="button" :class="buttonColorClass(index)"
                                 @click="changeShowHide(currentPhrase.EnglishWordInfo.ShowFlags,index)">{{currentPhrase.EnglishWordInfo.ShowFlags[index] ? currentPhrase.EnglishWordInfo.Words[index] : currentPhrase.EnglishWordInfo.HideWords[index]}}</button>
                     </template>
                </p>

                <p class="lead">
                     <template v-for="(word,index ) in currentPhrase.ChineseWordInfo.Words">
                         <button type="button" :class="buttonColorClass(index)"
                                 @click="changeShowHide(currentPhrase.ChineseWordInfo.ShowFlags,index)">{{currentPhrase.ChineseWordInfo.ShowFlags[index] ? currentPhrase.ChineseWordInfo.Words[index] : currentPhrase.ChineseWordInfo.HideWords[index]}}</button>
                     </template>
                </p>
            </template>


            <!--            <template v-for="item in phraseList">-->

            <!--                <p class="lead">-->
            <!--                    {{item.EnglishLine}}-->
            <!--                </p>-->
            <!--                <p class="lead">-->
            <!--                    {{item.ChineseLine}}-->
            <!--                </p>-->
            <!--&lt;!&ndash;                <hr>&ndash;&gt;-->
            <!--                <p class="lead">-->
            <!--&lt;!&ndash;                    {{item.EnglishWords}}&ndash;&gt;-->
            <!--                </p>-->
            <!--                <p class="lead">-->
            <!--&lt;!&ndash;                    {{item.ChineseWords}}&ndash;&gt;-->
            <!--                </p>-->
            <!--            </template>-->
        </main>

        <footer class="mastfoot mt-auto">
            <div class="inner">
                <p>Cover template for <a href="https://getbootstrap.com/">Bootstrap</a>, by <a
                        href="https://twitter.com/mdo">@mdo</a>.</p>
            </div>
        </footer>
    </div>
</span>

<script>
    const {createApp} = Vue

    createApp({
        data() {
            return {
                message: 'Hello Vue!',
                /**
                 * 字段列表
                 * */
                phraseList: undefined, // 短句列表
                currentPhrase: undefined, // 当期句学习
                /**
                 * 字段
                 * */
                bookEnum: getBookEnum(),
                /**
                 * 颜色
                 * */
                colorList: [
                    "btn mr5 btn-primary"
                    , "btn mr5 btn-success"
                    , "btn mr5 btn-danger"
                    , "btn mr5 btn-warning"
                    , "btn mr5 btn-info"],
                currColorIndex: 0,
                /**
                 * 全局
                 * */
                initFinish: false,
                that: this
            }
        },
        mounted() {
            this.changeBook(this.bookEnum.BOOK50TO700Words)
        },
        methods: {
            /**
             * 数据加载
             * */
            readExample(bookStr) {
                /**
                 * 建议一行英文、一行中文
                 * @type {string}
                 */
                    // let englishParagraph = "From now on, I not only study harder but also try my best to get better grades."
                    // let chineseParagraph = "从今以后，我不但要更加努力学习还要尽力取得更好的成绩。"
                    // let phraseList = readParagraph(englishParagraph, chineseParagraph)
                let phraseList = readParagraph(bookStr)
                this.phraseList = phraseList
                this.message = 'Hello Vue!CC'
                this.initFinish = true
                this.resetShowPhrase()
            },
            resetShowPhrase() {
                this.currentPhrase = this.phraseList[0]
                this.currentIndex = 0
            },
            /**
             * 播放处理
             * */
            // 上一个短语
            previousPhrase() {
                let index = this.phraseList.indexOf(this.currentPhrase)
                this.currentIndex = index == -1 ? 0 : (index - 1 < 0 ? this.phraseList.length - 1 : index - 1)
                this.currentPhrase = this.phraseList[this.currentIndex]
                this.randomPhrase(this.currentPhrase)
            },
            // 下一个短语
            nextPhrase() {
                let index = this.phraseList.indexOf(this.currentPhrase)
                this.currentIndex = index == -1 ? 0 : (index + 1 >= this.phraseList.length ? 0 : index + 1)
                this.currentPhrase = this.phraseList[this.currentIndex]
                this.randomPhrase(this.currentPhrase)
            },
            randomPhrase(phrase) {
                this.randomWordsSort(phrase.EnglishWords)
                this.randomWordsSort(phrase.ChineseWords)
            },
            randomWordsSort(arr) {
                arr.sort(function () {
                    return Math.random() - 0.5
                })
            },
            /**
             * 書記切換
             * */
            changeBook(bookEnum) {
                let bookStr = getIndexBook(bookEnum.bookNo)
                this.readExample(bookStr)
            },
            /**
             * 元素操作
             * */
            oneBlockForward(arr, index) {
                if (index > 0) {
                    let item = ''
                    item = arr[index - 1]
                    arr[index - 1] = arr[index]
                    arr[index] = item
                }
            },
            changeShowHide(arr, index) {
                arr[index] = !arr[index]
            },
            /**
             * 样式处理
             * */
            // 按长度取模
            buttonColorClass(index) {
                let arr = this.colorList
                return arr[parseInt(index % arr.length)]
            }
        }
    }).mount('#app')
</script>
<style>
    .langWithe {
        width: 100%;
        border: #7abaff 1px solid;
    }

    .mr5 {
        margin-right: 5px;
    }

    .width50 {
        width: 80px;
    }


    .cover-container {
        max-width: 442em;
    }
</style>
</body>
</html>
